<template>
  <div class="productlist">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
      <li v-bind:class="liststyle?liststyle:'proin'" v-for="item in prolistresult">
        <div><img v-lazy="item.imgUrl" @click="godetail(item)" @error="loaderrimg" @load="loadimg" /></div>
        <div v-text="item.name"></div>
        <div v-text="item.price"></div>
        <div class="showmore" v-show="showmore">
          <img src="../../static/img/prolistsee.png" /><span>221</span>
          <span v-on:click="gocomparelist()">更多</span>
        </div>
      </li>
    </ul>
    <div class="loading" v-show="loading">加载中...</div>
  </div>
</template>

<script>
import Mock from 'mockjs'
export default {
  name: 'productlist',
  props : ['showmore','liststyle'],
  data () {
    return {
      loading:false,
      prolistresult:[],
      totalprolist:[]
    }
  },
  methods : {
    loadMore() {
      var _this = this;
      this.loading = true;
      setTimeout(() => {
        this.getprolist();
        this.prolistresult = _this.totalprolist;
        this.loading = false;
      }, 1000);
    },
    getprolist(){
        let data = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 10 个元素
            'list|10': [{
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'price':'￥998',
                'name':'鸿茅药酒 500ml 专治不孕不育 效果显著',
                'imgUrl' : '../../static/img/yaojiu.png'
            }]
        });
        this.totalprolist = this.totalprolist.concat(data.list);
        this.prolistresult = data.list;
    },
    gocomparelist(){
      this.$router.push({ name: 'comparelist'});
    },
    godetail(item){
      this.$router.push({ name: 'drugdetail',query:item});
    }
  },
  mounted(){
      this.getprolist();
  }
}

</script>

<style lang="scss" scoped>
  $bordercolor:#eeeeee;
  .loading{
    text-align: center;
    width:100%;
    position:absolute;
    bottom:10px;
  }
  .productlist{
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    padding-bottom: 30px;
    transform: translate3d(0px, 0px, 0px);
    ul{
      width:100%;
    }
    .proin{
      width: 49%;
      border: 1px solid $bordercolor;
      display: inline-block;
      position: relative;
      margin: 1rem 0;
      padding-top:0.5rem;
      div{
        position:relative;
        font-size:0.8rem;
        img{
          width:100%;
        }
      }
      div:nth-child(1){
        width: 7rem;
        height: 7rem;
        margin: 0 auto;
        overflow: hidden;
      }
      div:nth-child(2){
        text-align: left;
        padding: 0.2rem 1rem;
      }
      div:nth-child(3){
        text-align: left;
        padding: 0 1rem;
        color:red;
      }
      .showmore{
        position: absolute;
        bottom: 0;
        right: 1rem;
        span{
          height:100%;
          display:inline-block;
          vertical-align: middle;
        }
        img{
          width: 1.2rem;
          vertical-align: middle;
        }
      }
    }
    .proin2{
      position:relative;
      width: 100%;
      border: 1px solid #eeeeee;
      div{
        position:relative;
      }
      div:nth-child(1){
        width: 5rem;
        height: 5rem;
        margin: 10px;
        img{
          width: 100%;
        }
      }
      div:nth-child(2){
        position: absolute;
        top: 1rem;
        left: 6rem;
        font-size: 0.9rem;
        width: 16rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      div:nth-child(3){
        position:absolute;
        color:red;
        bottom:1rem;
        left: 6rem;
      }
      .showmore{
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        span{
          height:100%;
          display:inline-block;
          vertical-align: middle;
        }
        img{
          width: 1.2rem;
          vertical-align: middle;
        }
      }
    }
  }
</style>
